<template>
  <el-dialog
    v-model="dialogVisible"
    title="查询仓库信息"
    width="40%"
    @close="closeDialog"
  >
    <div>
      <el-row :gutter="20">
        <el-col
          :lg="{ span: 12, offset: 6 }"
          :md="{ span: 20, offset: 2 }"
          :sm="{ span: 20, offset: 2 }"
          :xl="{ span: 12, offset: 6 }"
          :xs="24"
        >
          <el-form
            class="demo-form"
            label-position="top"
            label-width="100px"
            :model="form"
          >
            <el-form-item label="编码">
              <el-input v-model="form.whCode" placeholder="仓库编码" />
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="form.whName" placeholder="仓库名称" />
            </el-form-item>
            <div style="height: 20px" />
            <el-form-item>
              <el-row :gutter="40" style="width: 100%">
                <el-button type="primary" @click="query">查询</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
              </el-row>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script setup>
  const dialogVisible = ref(false)
  const form = ref({})

  const openDialog = () => {
    dialogVisible.value = true
  }

  const query = () => {
    _emits('query-callback', form.value)
    dialogVisible.value = false
  }

  const closeDialog = () => (dialogVisible.value = false)

  defineExpose({ openDialog })
  const _emits = defineEmits(['query-callback'])
</script>
